<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main" :id="id"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import autoSize from '../../uitils/auto-font-size.js'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle,
  },
  name: 'chart-xbar',
  props: {
    title: String,
    shadow: {
      type: Boolean,
      default: true,
    },
    color: {
      type: Array,
      default: () => {
        return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
      },
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    showLine: {
      type: Boolean,
      default: false,
    },
    horizontal: {
      type: Boolean,
      default: false,
    },
    barWidth: {
      type: [Number, String],
      default: 10,
    },
    splitLabel: {
      type: Boolean,
      default: true,
    },
    labelMax: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      minAngle: 0,
      center: ['50%', '55%'],
    }
  },
  computed: {
    id: function () {
      return `main-${Math.random()}`
    },
  },
  mounted() {
    setTimeout(() => {
      this._initBar()
    }, 3500)
  },
  updated() {
    setTimeout(() => {
      this._initBar()
    }, 1000)
  },
  methods: {
    fontSize(val, initWidth = 1920) {
      let nowClientWidth = document.documentElement.clientWidth
      return val * (nowClientWidth / initWidth)
    },
    _initBar() {
      let option = {
        // title: "2222",
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function (params) {
            const { product, count } = params[0].data
            // const icon = `<span style="display: inline-block;width:10px;height: 10px;background-color: ${color};border-radius: 50%;margin-right: 5px"></span>`
            const product1 = `<p style="margin-bottom:0;">${product}</p>`
            const count1 = `<p>${'数量：' + count}</p>`
            return product1 + count1
          },
        },
        grid: {
          left: '30px',
          right: this.horizontal ? '10%' : '50px',
          bottom: '5%',
          top: !this.horizontal ? '20%' : '10%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            // name: "111",
            nameTextStyle: {
              color: '#333',
            },
            minInterval: 1,
            axisLabel: {
              color: '#fff',
              fontSize: 14,
              formatter: (params) => {
                // 超出省略
                params = params.toString()
                var maxlength = this.labelMax
                // console.log(params)
                // console.log(typeof params)
                if (this.splitLabel) {
                  if (params.length > maxlength) {
                    return params.substring(0, maxlength) + '...'
                  } else {
                    return params
                  }
                } else {
                  return params
                }
              },
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#7389B9',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#ccc',
                type: 'dashed',
              },
            },
          },
        ],
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              formatter: (value) => {
                if (this.splitLabel) {
                  var maxlength = this.labelMax
                  if (value.length > maxlength) {
                    return value.substring(0, maxlength) + '...'
                  } else {
                    return value
                  }
                } else {
                  return value
                }
              },
              color: '#fff',
              fontSize: 14,
            },
            axisLine: {
              lineStyle: {
                color: '#7389B9',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#2A3968'],
              },
            },
          },
        ],

        series: [
          {
            // name: this.title.split('Top')[0],
            type: 'bar',
            barWidth: this.barWidth,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  formatter: (value) => {},
                  position: this.horizontal ? 'right' : 'top',
                  textStyle: {
                    color: '#fff',
                  },
                },
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1, //颜色的开始位置
                      color: '#061B34', // 0% 处的颜色
                    },
                    {
                      offset: 0, //颜色的结束位置
                      color: '#1F93FF', // 100% 处的颜色
                    },
                  ],
                },
                // color: '#1F93FF',
              },
            },
          },
        ],
        dataset: {
          source: this.data,
        },
      }
      if (this.horizontal) {
        let x = option.yAxis
        let y = option.xAxis
        x[0].splitLine.show = false
        x[0].axisTick.show = false
        // y[0].splitLine.lineStyle.color = '#ccc'
        y[0].axisTick.show = false
        option.xAxis = x
        option.yAxis = y
        option.series[0].itemStyle.normal.color = {
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 1, //颜色的开始位置
              color: 'rgba(0,152,150,.3)', // 0% 处的颜色
            },
            {
              offset: 0, //颜色的结束位置
              color: '#1F93FF', // 100% 处的颜色
            },
          ],
        }
      }

      if (this.showLine) {
        option.series.push({
          // name: this.title.split('Top')[0],
          symbol: 'circle',
          symbolSize: 8,
          type: 'line',
        })
      }
      let documentChart = document.getElementById(this.id)
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart)
        this.chart.setOption(option)
      }
      window.addEventListener('resize', () => {
        this.chart.resize()
        this.show = false
        setTimeout(() => {
          this.show = true
        }, 300)
      })
    },
  },
}
</script>

<style lang="less" scoped>
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  width: 100%;
  height: 30.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, 0.2);
  display: flex;
  flex-flow: column;

  .main {
    flex: 1;
  }
}
</style>
